<template>
  <gui-page
    ref="pageRef"
    :api-loading-status="apiLoadingStatus"
    :custom-footer="true"
    :custom-header="true"
    :full-page="true"
    :is-loading="pageLoading"
    :status-bar-class="['gui-bg-white']"
  >
    <template #gHeader>
      <view class="gui-flex gui-nowrap gui-rows gui-align-items-center gui-bg-white gui-border-b" style="height: 44px">
        <!-- 导航文本此处也可以是其他自定义内容 -->
        <gui-header-leading :home="false" />
        <text class="gui-h5 gui-flex1 gui-text-center gui-ellipsis gui-primary-text">激活卡</text>
        <!-- 此处加一个右侧展位元素与左侧同宽，实现标题居中 -->
        <view style="width: 120rpx" />
      </view>
    </template>
    <template #gBody>
      <view class="gui-flex gui-column gui-padding">
        <!--   数据列表     -->
        <view>
          <text>请输入卡密</text>
        </view>
      </view>
    </template>
  </gui-page>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const pageRef = ref<any>(null)
// 页面加载
const pageLoading = ref<boolean>(false)
// 用于记录是否有 api 请求正在执行
const apiLoadingStatus = ref<boolean>(false)
// 提交表单
const submitCard = () => {
  console.log('submit')
}
</script>

<style scoped></style>
